<template>
  <f7-page class="bg-color-white" @page:afterin="init">
    <f7-navbar :title="$t('m.ma1')" back-link=" "></f7-navbar>

    <no-content-tips v-if="addressList.length === 0"></no-content-tips>
    <van-address-list
      v-model="chosenAddressId"
      :list="addressList"
      @add="onAdd"
      @edit="onEdit"
      @select="onSelect"
    />
  </f7-page>
</template>

<script>
  import {getAddressList} from "../api/find";

  export default {
    name: "mall-address",
    data () {
      return {
        chosenAddressId: '1',
        addressList: []
      }
    },
    methods: {
      init() {
        getAddressList().then(res => {
          const parseData = res.data.map(item => {
            let address = item.area.split(',')
            return {
              id: item.id,
              name: item.name,
              tel: item.phone,
              address: address.splice(0, address.length - 1).join('') + item.address,
              addressDetail: item.address,
              areaCode: address[address.length - 1]
            };
          })
          this.addressList = parseData;
          console.log(parseData);
        })
      },
      onAdd() {
        this.$f7router.navigate('/add-mall-address/');
      },
      onEdit(item) {
        console.log('编辑', item);
        this.$f7router.navigate('/add-mall-address/', {context: {type: 'edit', addressItem: item}});
      },
      onSelect(item, index) {
        this.$store.commit('setSelectAddress', item);
        this.$f7router.back();
      }
    }
  }
</script>

<style scoped>

</style>
